<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

   <body>
      <ui:composition template="/templates/template.xhtml">

         <ui:define name="title">RichFaces Sample</ui:define>

         <ui:define name="head">
            <style>
               .outhello {
                  font-weight: bold;
               }
               .group {
                  padding: 6px;
               }
            </style>
         </ui:define>

         <ui:define name="body">

            <h:form prependId="false">
               <div class="group">
                  <h:outputLabel value="Name:" for="nameInput" />
                  <h:inputText id="nameInput" value="#{richBean.name}">
                     <a4j:ajax event="keyup" render="output" />
                  </h:inputText>
                  <h:panelGroup id="output">
                     <h:outputText value="Hello #{richBean.name}!"
                                   rendered="#{not empty richBean.name}" />
                  </h:panelGroup>
               </div>

               <div class="group">
                  <h:selectOneMenu value="#{selectsBean.currentType}"
                                   valueChangeListener="#{selectsBean.valueChanged}">
                     <f:selectItems value="#{selectsBean.firstList}" />
                     <a4j:ajax event="valueChange" render="second" />
                  </h:selectOneMenu>
                  <h:panelGroup id="second" layout="block">
                     <h:selectOneMenu value="#{selectsBean.currentType}"
                                      rendered="#{not empty selectsBean.currentType}">
                        <f:selectItems value="#{selectsBean.secondList}" />
                     </h:selectOneMenu>
                  </h:panelGroup>
               </div>

               <div class="group">
                  <h:panelGrid columns="3">
                     <h:outputText value="Name:" />
                     <h:inputText value="#{richBean.name}" />
                     <a4j:commandButton value="Say Hello" render="out" execute="@form" />
                  </h:panelGrid>
                  <h:panelGroup id="out">
                     <h:outputText value="Hello #{richBean.name} !"
                                   rendered="#{not empty richBean.name}" styleClass="outhello" />
                  </h:panelGroup>
               </div>
            </h:form>

            <!-- explicitely set ajaxRendered="true" -->
            <a4j:outputPanel ajaxRendered="true" styleClass="group" layout="block">
               <h:outputText value="Requests: #{richBean.number}"/>
            </a4j:outputPanel>

         </ui:define>
      </ui:composition>
   </body>
</html>